<!DOCTYPE html>
<html lang="en">

<head>
    @@include('meta.html')
    <title>个人中心</title>
    <style>
        body.hidden {
            min-width: 1400px;
            overflow-x: auto
        }
    </style>
</head>

<body class="hidden">
    @@include('header.html')
    @@include('user-center-banner.html')
    <div class="j-userCenter-tip clearfix">
        <div class="left clearfix j-menu-title">
            <span class="left titleText">个人中心</span><img src="images/icon/next.png" alt="" class="left title-ico">
            <ul class="left clearfix classify">
                <li>API管理</li>
            </ul>
        </div>
    </div>
    <div class="j-userCenter-content">
        
        <div class="clearfix hidden">
            @@include('club-personal.html')
            <div class="y-content-r">
                
                <div class="clearfix y-location-r">
                    API管理
                </div>
                <div class="j-userCenter-content-r">
                    <div class="y-scroll-height">
                        <div class="j-API-manage">
                            <div class="clearfix j-API-add-box">
                                <div class="fl">
                                    <span class="j-add-text">创建API密钥可以让您借助第三方网站或移动应用使用Portex的行情查询、各类交易服务。 请参阅<span class="tip">API文档</span>了解如何使用您的API keys</span>
                                    <span class="j-add-text">注意：请不要将生成的密钥和密匙泄露给第三方，不要随意下载第三方交易机器人等程序，这些程序极可能内置病毒木马，将对您的资产安全带来极大威胁。</span>
                                </div>
                                <div class="fr">
                                    <span class="mt20 j-btn j-primary-btn j-plain-btn pointer" onclick="addAPI()">添加</span>
                                </div>
                                
                            </div>
                            <span class="marT60 j-API-text">我的 API Key</span>
                            <div class="clearfix j-table-th border-b">
                                <div class="w15 fl text-l j-table-text">
                                    创建时间
                                </div>
                                <div class="w10 fl text-c j-table-text">
                                    备注
                                </div>
                                <div class="w20 fl text-c j-table-text">
                                    访问密钥 Access Key
                                </div>
                                <div class="w25 fl text-c j-table-text">
                                    权限
                                </div>
                                <div class="w15 fl text-c j-table-text">
                                    IP限制
                                </div>
                                <div class="w15 fl text-r j-table-text">
                                    操作
                                </div>
                            </div>

                            <ul class="j-useCenter-ul">
                                <li class="clearfix trade-li border-b">
                                    <div class="clearfix fl w15">
                                        <p class="j-record-text">2018.07.12 11:43:14</p>
                                    </div>
                                    <div class="fl w10 text-c">
                                        <p class="j-record-text">一只区块链小白</p>
                                    </div>
                                    <div class="fl w20 text-c">
                                        <p class="j-record-text">5b4d669291ed2974df7e8b6a</p>
                                    </div>
                                    <div class="fl w25 text-c">
                                        <div class="clearfix j-checkbox">
                                            <label class="fl pointer mr10" for="type-read">
                                                <input type="checkbox" id="type-read" class="y-pay-checkobox" onchange="payOrNot(this)">
                                                <i class="y-checkbox y-check"></i>
                                                <i class="y-checkbox y-checked none"></i>
                                                <span class="font16">信息读取</span>
                                            </label>
                                            <label class="fl pointer mr10" for="type-trade">
                                                <input type="checkbox" id="type-trade" class="y-pay-checkobox" onchange="payOrNot(this)">
                                                <i class="y-checkbox y-check"></i>
                                                <i class="y-checkbox y-checked none"></i>
                                                <span class="font16">交易权限</span>
                                            </label>
                                            <label class="fl pointer" for="type-withdraw">
                                                <input type="checkbox" id="type-withdraw" class="y-pay-checkobox" onchange="payOrNot(this)">
                                                <i class="y-checkbox y-check"></i>
                                                <i class="y-checkbox y-checked none"></i>
                                                <span class="font16">提现权限</span>
                                            </label>
                                        </div>
                                    </div>
                                    <div class="fl w15 text-c">
                                        <div class="clearfix j-checkbox">
                                            <label class="fl pointer mr10" for="type-unlimit">
                                                <input type="checkbox" id="type-unlimit" class="y-pay-checkobox" onchange="payOrNot(this)">
                                                <i class="y-checkbox y-check"></i>
                                                <i class="y-checkbox y-checked none"></i>
                                                <span class="font16">无限制</span>
                                            </label>
                                            <label class="fl pointer" for="type-limit">
                                                <input type="checkbox" id="type-limit" class="y-pay-checkobox" onchange="payOrNot(this)">
                                                <i class="y-checkbox y-check"></i>
                                                <i class="y-checkbox y-checked none"></i>
                                                <span class="font16">IP白名单</span>
                                            </label>
                                        </div>
                                    </div>
                                    <div class="fl w15 text-r">
                                        <span class="j-API-edit mr10" onclick="editAPI()">编辑</span>
                                        <span class="j-API-del" onclick="delAPI()">删除</span>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 添加 API Key -->
    <div class="y-popBox y-addAPI-pop none">
        <div class="popbg"></div>
        <div class="pop_box">
            <p class="pop_text">添加API Key</p>
            <div class="pop_desc">
                <span class="db line15">创建一个新的API,您可以借助第三方网站或移动应用 使用Portex的行情查询、各类交易服务
                </span>
                <div class="clearfix mt20">
                    <input type="text" class="fl fillInput" placeholder="输入API Key备注名" />
                    <button class="fr y-btn y-lilace-btn y-plain-btn y-md-btn">点击创建</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 删除 API Key -->
    <div class="y-popBox y-delAPI-pop none">
        <div class="popbg"></div>
        <div class="pop_box">
            <p class="pop_text">删除API Key</p>
            <div class="pop_desc text-l">
                <span class="db line15">您确定要永久删除API Key:</span>
                <span class="db line15">49b051bdfb659351e7a3fa6cd7ec06751dc84044</span>
            </div>
            <div class="clearfix pop_button">
                <div class="fl width50p">
                    <button class="y-btn y-popCancel-btn y-plain-btn y-md-btn">取消</button>
                </div>
                <div class="fl width50p">
                    <button class="y-btn y-lilace-btn y-plain-btn y-md-btn">确认</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 编辑API -->
    <div class="y-popBox y-editAPI-pop none">
        <div class="popbg"></div>
        <div class="pop_box" style="width: 760px; margin-left: -380px;">
            <p class="pop_text">编辑API</p>
            <div class="clearfix plr30 font20">
                <img src="images/qrcode.jpg" class="fl w15">
                <div class="fl w80 text-l ml20">
                    <span class="db line15 pb20">备注:一只区块链小白</span>
                    <span class="db line15 pb20">API Key：49b051bdfb659351e7a3fa6cd7ec06751dc84044</span>
                    <div class="clearfix j-checkbox pb20">
                        <span class="fl">权限:</span>
                        <label class="fl pointer ml10" for="add-read">
                            <input type="checkbox" id="add-read" class="y-pay-checkobox" onchange="payOrNot(this)">
                            <i class="y-checkbox y-check"></i>
                            <i class="y-checkbox y-checked none"></i>
                            <span class="">信息读取</span>
                        </label>
                        <label class="fl pointer ml10" for="add-trade">
                            <input type="checkbox" id="add-trade" class="y-pay-checkobox" onchange="payOrNot(this)">
                            <i class="y-checkbox y-check"></i>
                            <i class="y-checkbox y-checked none"></i>
                            <span class="">交易权限</span>
                        </label>
                        <label class="fl pointer ml10" for="add-withdraw">
                            <input type="checkbox" id="add-withdraw" class="y-pay-checkobox" onchange="payOrNot(this)">
                            <i class="y-checkbox y-check"></i>
                            <i class="y-checkbox y-checked none"></i>
                            <span class="">提现权限</span>
                        </label>
                    </div>
                    <div class="clearfix j-checkbox pb20">
                        <span class="fl">权限:</span>
                        <label class="fl pointer ml10" for="add-unlimit">
                            <input type="checkbox" id="add-unlimit" class="y-pay-checkobox" onchange="payOrNot(this)">
                            <i class="y-checkbox y-check"></i>
                            <i class="y-checkbox y-checked none"></i>
                            <span class="">无限制</span>
                        </label>
                        <label class="fl pointer ml10" for="add-limit">
                            <input type="checkbox" id="add-limit" class="y-pay-checkobox" onchange="payOrNot(this)">
                            <i class="y-checkbox y-check"></i>
                            <i class="y-checkbox y-checked none"></i>
                            <span class="">IP白名单</span>
                        </label>
                    </div>
                </div>
            </div>
            <div class="clearfix pop_button">
                <div class="fl width50p">
                    <button class="y-btn y-popCancel-btn y-plain-btn y-md-btn">取消</button>
                </div>
                <div class="fl width50p">
                    <button class="y-btn y-lilace-btn y-plain-btn y-md-btn">保存</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 短信验证码 -->
    <div class="y-popBox y-passwordWay-pop none">
        <div class="popbg"></div>
        <div class="pop_box no-padding">
            <div class="p20 fs24 text-l">
                短信验证码：
            </div>
            <div class="border-b pb20">
                <div class="clearfix">
                    <input type="text" class="fl ml20 fillInput w60" placeholder="请填写您的短信验证码" />
                    <button class="fl ml20 y-btn y-lilace-btn y-plain-btn y-md-btn">点击发送</button>
                </div>
            </div>
            <div class="clearfix pop_button">
                <button class="y-btn y-lilace-btn y-plain-btn y-lg-btn" onclick="order()">确定创建</button>
            </div>
        </div>
    </div>
    @@include('footer-js.html')
    <script type="text/javascript">
        $(document).ready(function() {
            var lis = $(".addr-options li");

            for (var i = 0; i < lis.length; i++) {
                lis[i].onclick = function(e) {
                    e.stopPropagation();
                    $(this).parents('.addr-filterList').find('.addr-select-box').val(this.getAttribute("rel"));
                    $(this).parents(".addr-options").hide();
                    $(this).parents('.addr-replace').find(".addr-current").html($(this).find('.addr-value').html());
                    getSelectVal(this);
                }
            }
            $(".addr-replace").click(function(e) {
                e.stopPropagation();
                $(this).find(".addr-options").show();
            })
            $(":not(.addr-replace)").click(function() {
                $(this).find(".addr-options").hide();
            })
            
        });
        function payOrNot(e) {
            if ($(e).is(':checked')) {
                $(e).siblings('.y-checked').removeClass('none');
                $(e).siblings('.y-check').addClass('none');
            } else {
                $(e).siblings('.y-checked').addClass('none');
                $(e).siblings('.y-check').removeClass('none');
            }
            console.log($(e).is(':checked'));
        }

        function addAPI() {
            $('.y-addAPI-pop').removeClass('none');
        }
        function delAPI() {
            $('.y-delAPI-pop').removeClass('none');
        }
        function editAPI() {
            $('.y-editAPI-pop').removeClass('none');
        }
    </script>
</body>

</html>